<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分类</title>
		<!-- 公共样式 -->
		<link type="text/css" rel="stylesheet" href="css/public.css" />
		<!-- 页面独立的 -->
		<link type="text/css" rel="stylesheet" href="css/classification2.css" />
		<!-- bootstrap -->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!-- Link Swiper's CSS -->
		<link rel="stylesheet" href="css/swiper-bundle.min.css" />
		
		<style></style>
	</head>
	<body>
		<!-- 主体内容 -->
		<div class="content">
			<div class="content_left" id="content_left">
				<li class="content_leftli content_leftli0">精品推荐</li>
				<li class="content_leftli">品质肉禽</li>
				<li class="content_leftli">面点烘焙</li>
				<li class="content_leftli">风味小吃</li>
				<li class="content_leftli">乳品冷饮</li>
				<li class="content_leftli">海鲜水产</li>
				<li class="content_leftli">时令蔬果</li>
			</div>
			<div class="content_right" id="content_right">
				<dd class="content_rightli content_rightli0">
					<div class="content_rightli_p1">
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right01.png"/>
							</div>
							<div class="content_rightli_p1_p">
								春天吃哪里
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right02.png"/>
							</div>
							<div class="content_rightli_p1_p">
								烧烤好食材
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right03.png"/>
							</div>
							<div class="content_rightli_p1_p">
								海外直采
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right04.png"/>
							</div>
							<div class="content_rightli_p1_p">
								热带水果
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right05.png"/>
							</div>
							<div class="content_rightli_p1_p">
								下水喉杂
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right06.png"/>
							</div>
							<div class="content_rightli_p1_p">
								精品礼盒
							</div>
						</div>
					</div>
					<div class="content_rightli_p2">
						<div class="content_rightli_p2_img">
							<img src="img/recommend4.jpg"/>
						</div>
						<div class="content_rightli_p2_text">
							<div class="content_rightli_p2_p">
								广州酒家利口福 嫩牛尊品芝士船蒸烤披萨85g*2 早餐晚餐 速冻食品 懒人速食 下午茶
							</div>
							<div class="content_rightli_p2_p1">
								<div class="content_rightli_p2_p1left">
									￥24.9 <s>￥30</s>
								</div>
								<button class="content_rightli_p2_p1right">加入购物车</button>
							</div>
						</div>
					</div>
					<div class="content_rightli_p2">
						<div class="content_rightli_p2_img">
							<img src="img/recommend3.jpg"/>
						</div>
						<div class="content_rightli_p2_text">
							<div class="content_rightli_p2_p">
								CP正大食品(CP) 风情骨肉 1kg  白羽鸡 半成品 鸡架 奥尔良风味
							</div>
							<div class="content_rightli_p2_p1">
								<div class="content_rightli_p2_p1left">
									￥19.9 <s>￥25</s>
								</div>
								<button class="content_rightli_p2_p1right">加入购物车</button>
							</div>
						</div>
					</div>
					<div class="content_rightli_p2">
						<div class="content_rightli_p2_img">
							<img src="img/recommend2.jpg"/>
						</div>
						<div class="content_rightli_p2_text">
							<div class="content_rightli_p2_p">
								思念腊汁肉饼陕西风味880g8个半成品早餐速食速冻食品生鲜
							</div>
							<div class="content_rightli_p2_p1">
								<div class="content_rightli_p2_p1left">
									￥34.9 <s>￥40</s>
								</div>
								<button class="content_rightli_p2_p1right">加入购物车</button>
							</div>
						</div>
					</div>
					<div class="content_rightli_p2">
						<div class="content_rightli_p2_img">
							<img src="img/recommend1.jpg"/>
						</div>
						<div class="content_rightli_p2_text">
							<div class="content_rightli_p2_p">
								田牧悠致抹茶味鲜奶冰淇淋67g*6支不加一滴水牛奶雪糕生牛乳冰激凌
							</div>
							<div class="content_rightli_p2_p1">
								<div class="content_rightli_p2_p1left">
									￥73.9 <s>￥99.9</s>
								</div>
								<button class="content_rightli_p2_p1right">加入购物车</button>
							</div>
						</div>
					</div>
					<div class="content_rightli_p2">
						<div class="content_rightli_p2_img">
							<img src="img/recommend5.jpg"/>
						</div>
						<div class="content_rightli_p2_text">
							<div class="content_rightli_p2_p">
								上鲜 炭烤黑椒柠香鸡腿肉串 400g 出口日本级柠檬甜香鸡腿串微波加热
							</div>
							<div class="content_rightli_p2_p1">
								<div class="content_rightli_p2_p1left">
									￥26.9 <s>￥30</s>
								</div>
								<button class="content_rightli_p2_p1right">加入购物车</button>
							</div>
						</div>
					</div>
				</dd>
				<dd class="content_rightli">
					<div class="content_rightli_p1">
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_1.png"/>
							</div>
							<div class="content_rightli_p1_p">
								鱼类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_2.png"/>
							</div>
							<div class="content_rightli_p1_p">
								虾类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_3.png"/>
							</div>
							<div class="content_rightli_p1_p">
								蟹类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_4.png"/>
							</div>
							<div class="content_rightli_p1_p">
								海参
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_5.png"/>
							</div>
							<div class="content_rightli_p1_p">
								贝类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_6.png"/>
							</div>
							<div class="content_rightli_p1_p">
								鱿鱼章鱼
							</div>
						</div>
					</div>
					<div class="content_rightli_p2">
						<div class="content_rightli_p2_img">
							<img src="img/recommend5.jpg"/>
						</div>
						<div class="content_rightli_p2_text">
							<div class="content_rightli_p2_p">
								上鲜 炭烤黑椒柠香鸡腿肉串 400g 出口日本级柠檬甜香鸡腿串微波加热
							</div>
							<div class="content_rightli_p2_p1">
								<div class="content_rightli_p2_p1left">
									￥26.9 <s>￥30</s>
								</div>
								<button class="content_rightli_p2_p1right">加入购物车</button>
							</div>
						</div>
					</div>
					<div class="content_rightli_p2">
						<div class="content_rightli_p2_img">
							<img src="img/recommend1.jpg"/>
						</div>
						<div class="content_rightli_p2_text">
							<div class="content_rightli_p2_p">
								田牧悠致抹茶味鲜奶冰淇淋67g*6支不加一滴水牛奶雪糕生牛乳冰激凌
							</div>
							<div class="content_rightli_p2_p1">
								<div class="content_rightli_p2_p1left">
									￥73.9 <s>￥99.9</s>
								</div>
								<button class="content_rightli_p2_p1right">加入购物车</button>
							</div>
						</div>
					</div>
					<div class="content_rightli_p2">
						<div class="content_rightli_p2_img">
							<img src="img/recommend2.jpg"/>
						</div>
						<div class="content_rightli_p2_text">
							<div class="content_rightli_p2_p">
								思念腊汁肉饼陕西风味880g8个半成品早餐速食速冻食品生鲜
							</div>
							<div class="content_rightli_p2_p1">
								<div class="content_rightli_p2_p1left">
									￥34.9 <s>￥40</s>
								</div>
								<button class="content_rightli_p2_p1right">加入购物车</button>
							</div>
						</div>
					</div>
					<div class="content_rightli_p2">
						<div class="content_rightli_p2_img">
							<img src="img/recommend3.jpg"/>
						</div>
						<div class="content_rightli_p2_text">
							<div class="content_rightli_p2_p">
								CP正大食品(CP) 风情骨肉 1kg  白羽鸡 半成品 鸡架 奥尔良风味
							</div>
							<div class="content_rightli_p2_p1">
								<div class="content_rightli_p2_p1left">
									￥19.9 <s>￥25</s>
								</div>
								<button class="content_rightli_p2_p1right">加入购物车</button>
							</div>
						</div>
					</div>
					<div class="content_rightli_p2">
						<div class="content_rightli_p2_img">
							<img src="img/recommend4.jpg"/>
						</div>
						<div class="content_rightli_p2_text">
							<div class="content_rightli_p2_p">
								广州酒家利口福 嫩牛尊品芝士船蒸烤披萨85g*2 早餐晚餐 速冻食品 懒人速食 下午茶
							</div>
							<div class="content_rightli_p2_p1">
								<div class="content_rightli_p2_p1left">
									￥24.9 <s>￥30</s>
								</div>
								<button class="content_rightli_p2_p1right">加入购物车</button>
							</div>
						</div>
					</div>
				</dd>
				<dd class="content_rightli">
					<div class="content_rightli_p1">
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_1.png"/>
							</div>
							<div class="content_rightli_p1_p">
								鱼类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_2.png"/>
							</div>
							<div class="content_rightli_p1_p">
								虾类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_3.png"/>
							</div>
							<div class="content_rightli_p1_p">
								蟹类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_4.png"/>
							</div>
							<div class="content_rightli_p1_p">
								海参
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_5.png"/>
							</div>
							<div class="content_rightli_p1_p">
								贝类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_6.png"/>
							</div>
							<div class="content_rightli_p1_p">
								鱿鱼章鱼
							</div>
						</div>
					</div>
					
				</dd>
				<dd class="content_rightli">
					<div class="content_rightli_p1">
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_1.png"/>
							</div>
							<div class="content_rightli_p1_p">
								鱼类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_2.png"/>
							</div>
							<div class="content_rightli_p1_p">
								虾类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_3.png"/>
							</div>
							<div class="content_rightli_p1_p">
								蟹类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_4.png"/>
							</div>
							<div class="content_rightli_p1_p">
								海参
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_5.png"/>
							</div>
							<div class="content_rightli_p1_p">
								贝类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_6.png"/>
							</div>
							<div class="content_rightli_p1_p">
								鱿鱼章鱼
							</div>
						</div>
					</div>
					
				</dd>
				<dd class="content_rightli">
					<div class="content_rightli_p1">
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_1.png"/>
							</div>
							<div class="content_rightli_p1_p">
								鱼类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_2.png"/>
							</div>
							<div class="content_rightli_p1_p">
								虾类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_3.png"/>
							</div>
							<div class="content_rightli_p1_p">
								蟹类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_4.png"/>
							</div>
							<div class="content_rightli_p1_p">
								海参
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_5.png"/>
							</div>
							<div class="content_rightli_p1_p">
								贝类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_6.png"/>
							</div>
							<div class="content_rightli_p1_p">
								鱿鱼章鱼
							</div>
						</div>
					</div>
					
				</dd>
				<dd class="content_rightli">
					<div class="content_rightli_p1">
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_1.png"/>
							</div>
							<div class="content_rightli_p1_p">
								鱼类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_2.png"/>
							</div>
							<div class="content_rightli_p1_p">
								虾类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_3.png"/>
							</div>
							<div class="content_rightli_p1_p">
								蟹类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_4.png"/>
							</div>
							<div class="content_rightli_p1_p">
								海参
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_5.png"/>
							</div>
							<div class="content_rightli_p1_p">
								贝类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_6.png"/>
							</div>
							<div class="content_rightli_p1_p">
								鱿鱼章鱼
							</div>
						</div>
					</div>
					
				</dd>
				<dd class="content_rightli">
					<div class="content_rightli_p1">
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_1.png"/>
							</div>
							<div class="content_rightli_p1_p">
								鱼类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_2.png"/>
							</div>
							<div class="content_rightli_p1_p">
								虾类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_3.png"/>
							</div>
							<div class="content_rightli_p1_p">
								蟹类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_4.png"/>
							</div>
							<div class="content_rightli_p1_p">
								海参
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_5.png"/>
							</div>
							<div class="content_rightli_p1_p">
								贝类
							</div>
						</div>
						<div class="content_rightli_p1_0">
							<div class="content_rightli_p1_img">
								<img src="img/content_right5_6.png"/>
							</div>
							<div class="content_rightli_p1_p">
								鱿鱼章鱼
							</div>
						</div>
					</div>
					
				</dd>
			</div>
		</div>
		
		
		<!-- 底部空白 -->
		<div class="bottomblank1"></div>
		
		<!-- 底部 -->
		<div class="bottom">
			<a href="index.html" class="bottom_li">
				<div class="bottom_liimg">
					<img src="img/bottom1.png" />
				</div>
				<div class="bottom_lip">首页</div>
			</a>
			<a href="classification2.html" class="bottom_li">
				<div class="bottom_liimg">
					<img src="img/bottom2.png" />
				</div>
				<div class="bottom_lip">分类</div>
			</a>
			<a href="shopping3.html" class="bottom_li">
				<div class="bottom_liimg">
					<img src="img/bottom3.png" />
				</div>
				<div class="bottom_lip">购物</div>
			</a>
			<a href="person4.html" class="bottom_li">
				<div class="bottom_liimg">
					<img src="img/bottom4.png" />
				</div>
				<div class="bottom_lip">我的</div>
			</a>
		</div>
		
	</body>
</html>
<!-- bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- jquery  -->
<script src="js/jquery.min.js"></script>
<!-- wow.js -->
<script src="js/wow.min.repeat.js"></script>
<!-- Swiper JS -->
<script src="js/swiper-bundle.min.js"></script>

<script>
	//实例化wow.js
	new WOW().init()

	let li = document.getElementById("content_left").getElementsByTagName("li")
	let dd = document.querySelector("#content_right").getElementsByTagName("dd")
	
	function f1() {
		for (var i = 0; i < li.length; i++) {
			li[i].style.backgroundColor = '#fdfdfd';
			dd[i].style.display = 'none';
		}
		li[u].style.backgroundColor = "antiquewhite";
		dd[u].style.display = "block";
	}
	for (var f = 0; f < li.length; f++) {
		li[f].index = f;
		li[f].onclick = function() {
			u = this.index;
			f1();
		}
	}
</script>